<script setup lang="ts">
import { ref, computed } from 'vue'
import YcScreenSvg from '@/components/yc-screen-svg'
import CommonLine from '@/components/common/common-line/CommonLine.vue'

const componentMap = {
  line: CommonLine
}

const data = computed(() => [
  { type: 'line', path: '200,300 h100 v90 h-200', active: activeList.value[0] },
  { type: 'line', path: '200,300 h100 v-90 h200', active: activeList.value[1] },
  { type: 'line', path: '400,500 v-200', active: activeList.value[2] },
  { type: 'line', path: '400,500 v200', active: activeList.value[3] },
  { type: 'line', path: '400,500 h-200', active: activeList.value[4] },
  { type: 'line', path: '400,500 h200', active: activeList.value[5] },
  { type: 'circle', point: '400,500', active: activeList.value[6] }
])

const activeList = ref([false, false, true, true, true, true, true])
</script>

<template>
  <div>
    <YcScreenSvg
      v-model="data"
      style="background-color: black; width: 1000px"
      :width="1000"
      :height="1000"
      :component-map="componentMap"
    />
    <div style="position: absolute; top: 20px; right: 20px; background-color: aquamarine">
      active1<input type="checkbox" v-model="activeList[0]" /> active2<input
        type="checkbox"
        v-model="activeList[1]"
      />
      active3<input type="checkbox" v-model="activeList[2]" /> active4<input
        type="checkbox"
        v-model="activeList[3]"
      />
      active5<input type="checkbox" v-model="activeList[4]" /> active6<input
        type="checkbox"
        v-model="activeList[5]"
      />
      active7<input type="checkbox" v-model="activeList[6]" />
    </div>
  </div>
</template>
